// src/views/banner/List.tsx
import { Button, Image, Popconfirm, Space, Table } from 'antd';
import { useEffect, useState } from 'react';
import { DeleteOutlined } from '@ant-design/icons'
import { getBannerList, deleteBanner } from '../../api/banner';
import { useNavigate } from 'react-router-dom';

type ListProps = {}

export const List = (props: ListProps) => {
  const [bannerList, setBannerList] = useState([])

  const [current, setCurrent] = useState(1) // 页码
  const [pageSize, setPageSize] = useState(5) // 每页显示个数
  async function getData() {
    const res = await getBannerList()
    setBannerList(res.data.data)
  }

  useEffect(() => {
    getData()
  }, [])

  const navgate = useNavigate()

  return (
    <Space direction='vertical' style={{ width: '100%' }}>
      <Button type='primary' onClick={() => {
        navgate('/banner/add', {
          replace: true
        })
      }}>添加轮播图</Button>
      <Table
        dataSource={bannerList}
        rowKey="bannerid"
        scroll={{ y: document.body.offsetHeight - 330 }}
        bordered
        pagination={{
          current,
          pageSize,
          onChange(page, pageSize) {
            setCurrent(page)
            setPageSize(pageSize)
          }
        }}
      >
        <Table.Column
          title="序号"
          render={(text, record, index) => { return <span>{(current - 1) * pageSize + index + 1}</span> }}
        ></Table.Column>
        <Table.Column
          title="图片"
          dataIndex="img"
          render={(text) => { return <Image src={text} width={150} height={75} /> }}
        ></Table.Column>
        <Table.Column
          title="提示信息"
          dataIndex="alt"
        ></Table.Column>
        <Table.Column
          title="链接地址"
          dataIndex="link"
        ></Table.Column>
        <Table.Column
          title="操作"
          render={(text, record: any, index) => {
            return (
              <Space>
                <Popconfirm
                  title="确定删除吗?"
                  onConfirm={async () => {
                    await deleteBanner({ bannerid: record.bannerid })
                    getData()
                  }}
                  onCancel={() => { }}
                  okText="确定"
                  cancelText="再想想"
                >
                  <Button danger shape="circle" icon={<DeleteOutlined />} />
                </Popconfirm>
              </Space>
            )
          }}
        ></Table.Column>
      </Table>
    </Space>
  );
}